<template>
        <div id="vipZone">
            <header>
                <i @click="goBack()"></i>
                <div>VIP专区</div>
            </header>
          <ul class="list vipList">
              <div class='mc' v-if="list.length<1">
                  <!-- <img src="../../image/no_collection@2x.png" width='110' alt=""> -->
                  <p>暂无数据!</p>
              </div>
              <mt-loadmore
                   :bottom-method="loadBottom"
                   :bottom-all-loaded="allLoaded"
                   ref="loadmore"
                   :bottom-pull-text="bottomPullText"
                   :autoFill="false"
              >
              <li v-for="(item,index) in list" :key='index' v-if="list.length>0">
                  <router-link :to="{ name: 'homeDetail', query: { id: item.id}}">
                        <div class='img'>
                            <img :src="item.course_pic" width="100%" height="125" />
                        </div>
                        <div class='tit'>
                            <h3>{{item.course_name}}</h3>
                            <p>共22节<i>234人已报名</i></p>
                        </div>
                    </router-link>
              </li>
              </mt-loadmore>
          </ul>
      </div>
  </template>
  <script>
      export default {
          data() {
              return {
                  list: [],
                  sentPage:{
                    page : 1,//分页累加
                  },//接口入参
                  totalNum: 0, //总数据条数
                  allLoaded: false,         //分页数据是否已经加载完毕
                  bottomPullText: "上拉加载数据哦~",  //上拉提示信息
              }
          },
          components: {

          },
          methods: {
              goBack() {
                  this.$router.back();
              },
              //获取课程列表 v-if判断是否是热门视频
              getVipData(params) {
                var that = this;
                this.$api.post(this.$api.baseURLSchool,"whether/view_course_user/charge",params,r => {
                  console.log(r);
                  this.totalNum = r.data.records; //总数据
                  var list  = r.data.rows;
                  that.list = that.list.concat(list);
                  if(list.length==0) {
                    that.$utils._toast("暂无更多数据");
                  }
                },err => {
                  console.log(err);
                })
              },
              loadBottom() {
                (this.sentPage.page)++;
                    setTimeout(() => {
                      this.getVipData(this.sentPage);
                    }, 20);
                    if(this.totalNum == this.list.length) {
                        this.allLoaded = true;
                    }
                this.$refs.loadmore.onBottomLoaded();
              }
          },
          created() {
              this.getVipData(this.sentPage);
          }
      }
  </script>
  <style lang="scss" scoped>
    .mc {
      padding: 40px 0;
      margin: auto;
      position: absolute;
      left: 50%;
      top: 40%;
      transform: translate(-50%,-50%);
      img {
        display: block;
        margin: 0 auto;
      }
      p {
        padding-top: 10px;
        text-align: center;
      }
    }
  </style>